
<div id="setting_component_list"></div>

<script src="https://res.dcdev.net/dcdev/v1.0.8/assets/js/render_somthing.js"></script>

<script>
    // 记录是否首次改变样式及状态，如果是则undo之后再执行样式修改
    var setting_component_list;
    setting_component_list = new render_somthing();
    setting_component_list.init({
        // div的id
        id: "#setting_component_list",
        // x/y/flow   分别为x向滚动、y向滚动、瀑布流
        method: "y",
        // 容器是指即将渲染内容的外围容器，可以为div/table/ul ...
        container: {
            html: `
<div  class="drop" style="margin-left:10px;margin-top:10px;"></div>
`
        },
        // 渲染内容的配置
        content: {
            default: `
<div  draggable="true" ondragstart="dragstart_handler(event);" data-key="type" style="display:flex;    flex-direction: row;justify-content: flex-start;align-items: center;margin-bottom:10px;">
    <div style="display:flex;    flex-direction: column;justify-content: flex-start;">
        <div style="font-size:15px;width: 300px;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;">#{info}</div>
        <div style="color:gray;font-size:12px;">#{framework}</div>
    </div>
    <div data-key="up" style="color:gray;font-size:12px;margin-left:auto;font-size:20px;border: solid 1px;width: 30px;text-align: center;border-radius: 50%;
    height: 30px;
    justify-content: center;
    display: flex;
    align-items: center;">↑</div>
    <div data-key="down" style="color:gray;font-size:12px;margin-left:10px;margin-right:10px;font-size:20px;border: solid 1px;width: 30px;text-align: center;border-radius: 50%;
    height: 30px;
    justify-content: center;
    display: flex;
    align-items: center;">↓</div>
</div>
`,
        },
        // 条件渲染内容
                /*
                    ^{ROW_INDEX} - 常量，表示数据数组的下标
                    #{title}     - 变量，表示数据数组中对象的key
                */
                condition: [{
                        expression: "#{small} == true",
                        html: `
                        <div  draggable="true" ondragstart="dragstart_handler(event);" data-key="type" style="padding-left: 10px;display:flex;    flex-direction: row;justify-content: flex-start;align-items: center;margin-bottom:10px;">
                            <div style="display:flex;flex-direction: column;justify-content: flex-start;">
                                <div style="font-size:15px;width: 300px;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;">#{info}</div>
                                <div style="color:gray;font-size:12px;">#{framework}</div>
                            </div>
                        </div>
                        `}],
        callback: {
            click: function (res) {
                if(res.key == "up"){
                    console.log(res);
                    //组装当前选中
                    if(res.index-1<0){
                        layer.msg('还移动个鬼~ error:小于数组最小下标')
                        return;
                    }
                    var obj = getComponentData(res.value.framework,res.value.info);
                    var i=1;
                    var data=window['ComponentUseInfo'][res.index-i];
                    while (data.small == true) {
                        i=i+1;
                        data=window['ComponentUseInfo'][res.index-i];
                    }
                    var obj2 = getComponentData(data.framework,data.info);
                    moveComponent(obj,obj2);
                    setting_component_list.render(getComponentUseInfo(editor.getValue()));
                }
                if(res.key == "down"){
                    console.log(res);
                    //组装当前选中
                    if(res.index+1>=window['ComponentUseInfo'].length){
                        layer.msg('还移动个鬼~ error:大于数组最大下标')
                        return;
                    }
                    var obj = getComponentData(res.value.framework,res.value.info);
                    var i=1;
                    var data=window['ComponentUseInfo'][res.index+i];
                    while (data.small == true) {
                        i=i+1;
                        data=window['ComponentUseInfo'][res.index+i];
                    }
                    var obj2 = getComponentData(data.framework,data.info);
                    
                    moveComponent(obj2,obj);
                    setting_component_list.render(getComponentUseInfo(editor.getValue()));
                }
                
            }
        },
    });
    //setting_component_list.render(getComponentUseInfo(editor.getValue()));

    function getComponentData(framework,info){
        var obj={};
        obj.start = `<!--${framework}/${info}start-->`
        obj.end = `<!--${framework}/${info}end-->`
        return obj;
    }
    function moveComponent(obj,obj2){
        var data = getComponentCode(obj.start,obj.end);
        var data2 = getComponentCode(obj2.start,obj2.end);
        select_by_range(data[0].range);
        replace_selected_content(data2[0].content);
        select_by_range(data2[0].range);
        replace_selected_content(data[0].content);
        console.log(data);
        console.log(data2);
    }
</script>